<form nz-form #createOrEditModalForm="ngForm" (ngSubmit)="save()" autocomplete="off">
    <div class="modal-header">
        <div class="modal-title">
            <i nz-icon type="user" class="mr-sm"></i>
            <span *ngIf="userId">{{"EditUser" | localize}}: {{user.userName}}</span>
            <span *ngIf="!userId">{{"CreateNewUser" | localize}}</span>
        </div>
    </div>

    <fieldset>
        <nz-tabset>
            <nz-tab [nzTitle]="userInfoTabTitleTpl">
                <ng-template #userInfoTabTitleTpl>
                    <i nz-icon type="user"></i>{{'UserInformations' | localize}}
                </ng-template>
                <nz-row>
                    <nz-col nzSpan="6" class="pt-lg text-center">
                        <img src="{{profilePicture}}" width="128" height="128" class="img-thumbnail img-rounded" />
                    </nz-col>
                    <nz-col nzSpan="18" class="pl-lg">
                        <nz-form-item nz-row>
                            <nz-form-label nzFor="Name" nzRequired>
                                {{"Name" | localize}}
                            </nz-form-label>
                            <nz-form-control nzHasFeedback>
                                <input nz-input #nameInput="ngModel" name="name" [(ngModel)]="user.name" placeholder="{{'Name' | localize}}"
                                    required maxlength="32">
                                <nz-form-explain *ngIf="nameInput.dirty && nameInput.errors">
                                    <validation-messages [formCtrl]="nameInput"></validation-messages>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item nz-row>
                            <nz-form-label nzFor="Surname" nzRequired>
                                {{"Surname" | localize}}
                            </nz-form-label>
                            <nz-form-control nzHasFeedback>
                                <input nz-input #surnameInput="ngModel" name="Surname" [(ngModel)]="user.surname"
                                    placeholder="{{'Surname' | localize}}" id="Surname" required maxlength="24">
                                <nz-form-explain *ngIf="surnameInput.dirty && surnameInput.errors">
                                    <validation-messages [formCtrl]="surnameInput"></validation-messages>
                                </nz-form-explain>
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="emailAddress" nzRequired>
                        {{"EmailAddress" | localize}}
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input #emailAddressInput="ngModel" name="emailAddress" [(ngModel)]="user.emailAddress"
                            placeholder="{{'EmailAddress' | localize}}" id="emailAddress" type="email" required maxlength="256"
                            email>
                        <nz-form-explain *ngIf="emailAddressInput.dirty && emailAddressInput.errors">
                            <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="PhoneNumber">
                        {{"PhoneNumber" | localize}}
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input #phoneNumberInput="ngModel" name="PhoneNumber" [(ngModel)]="user.phoneNumber"
                            placeholder="{{'PhoneNumber' | localize}}" id="PhoneNumber" maxlength="24">
                        <nz-form-explain *ngIf="phoneNumberInput.dirty && phoneNumberInput.errors">
                            <validation-messages [formCtrl]="phoneNumberInput"></validation-messages>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="userName" nzRequired>
                        {{"UserName" | localize}}
                        <em *ngIf="!canChangeUserName">
                            <i nz-icon type="info-circle" nz-tooltip [nzTitle]="l('CanNotChangeAdminUserName')"></i>
                        </em>
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input #userNameInput="ngModel" name="userName" [disabled]="!canChangeUserName"
                            [(ngModel)]="user.userName" placeholder="{{'UserName' | localize}}" required maxlength="32">
                        <nz-form-extra *ngIf="!canChangeUserName">{{'CanNotChangeAdminUserName' | localize}}</nz-form-extra>
                        <nz-form-explain *ngIf="userNameInput.dirty && userNameInput.errors">
                            <validation-messages [formCtrl]="userNameInput"></validation-messages>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <label nz-checkbox name="SetRandomPassword" [(ngModel)]="setRandomPassword">{{"SetRandomPassword" | localize}}</label>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row *ngIf="!setRandomPassword">
                    <nz-form-label nzFor="Password" [nzRequired]="!user.id && !setRandomPassword">
                        {{"Password" | localize}}
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input type="password" #Password="ngModel" id="Password" name="Password" [(ngModel)]="user.password"
                            placeholder="{{'Password' | localize}}" minlength="8" validateEqual="PasswordRepeat" reverse="true"
                            [required]="!user.id && !setRandomPassword" maxlength="32" [requireDigit]="passwordComplexitySetting.requireDigit"
                            [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                            [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                            [requiredLength]="passwordComplexitySetting.requiredLength" validateEqual="PasswordRepeat"
                            reverse="true">

                        <nz-form-explain [hidden]="setRandomPassword || Password.valid || Password.pristine">
                            <ul *ngIf="Password.errors">
                                <li [hidden]="!Password.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!Password.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!Password.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!Password.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!Password.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>

                            </ul>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item *ngIf="!setRandomPassword" class="mb-md">
                    <nz-form-label nzFor="PasswordRepeat" [nzRequired]="!user.id && !setRandomPassword">
                        {{"PasswordRepeat" | localize}}
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input name="PasswordRepeat" #PasswordRepeat="ngModel" [(ngModel)]="user.passwordRepeat"
                            placeholder="{{'PasswordRepeat' | localize}}" type="password" validateEqual="Password" reverse="false"
                            [required]="!user.id && !setRandomPassword" maxlength="32" [requireDigit]="passwordComplexitySetting.requireDigit"
                            [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                            [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                            [requiredLength]="passwordComplexitySetting.requiredLength" validateEqual="Password"
                            reverse="false">

                        <nz-form-explain [hidden]="setRandomPassword || PasswordRepeat.valid || PasswordRepeat.pristine">
                            <ul *ngIf="PasswordRepeat.errors">
                                <li [hidden]="!PasswordRepeat.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!PasswordRepeat.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!PasswordRepeat.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!PasswordRepeat.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                <li [hidden]="PasswordRepeat.valid">{{"PasswordsDontMatch" | localize}}</li>
                            </ul>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <nz-checkbox-wrapper>
                                <div nz-col><label nz-checkbox name="ShouldChangePasswordOnNextLogin" [(ngModel)]="user.shouldChangePasswordOnNextLogin">{{"ShouldChangePasswordOnNextLogin" | localize}}</label></div>
                                <div nz-col><label nz-checkbox name="SendActivationEmail" [(ngModel)]="sendActivationEmail">{{"SendActivationEmail" | localize}}</label></div>
                                <div nz-col><label nz-checkbox name="Active" [(ngModel)]="user.isActive">{{"Active" | localize}}</label></div>
                                <div *ngIf="isTwoFactorEnabled">
                                    <label nz-checkbox name="IsTwoFactorEnabled" [(ngModel)]="user.isTwoFactorEnabled">{{"IsTwoFactorEnabled" | localize}}</label>
                                </div>
                                <div *ngIf="isLockoutEnabled">
                                    <label nz-checkbox name="IsLockoutEnabled" [(ngModel)]="user.isLockoutEnabled">{{"IsLockoutEnabled" | localize}}</label>
                                </div>
                        </nz-checkbox-wrapper>
                    </nz-form-control>
                </nz-form-item>
            </nz-tab>
            <nz-tab [nzTitle]="roleTitleTpl">
                <ng-template #roleTitleTpl>
                    <nz-badge [nzCount]="getAssignedRoleCount()">
                        <i nz-icon type="medicine-box"></i>
                        <span>
                            {{'Roles' | localize}}
                        </span>
                    </nz-badge>
                </ng-template>
                <nz-row>
                    <nz-col class="mb-md" nzSpan="6" *ngFor="let role of roles">

                        <label nz-checkbox [(ngModel)]="role.isAssigned" [name]="role.roleName">
                            {{role.roleDisplayName}}
                        </label>

                    </nz-col>
                </nz-row>
            </nz-tab>
            <nz-tab [nzTitle]="organizationUTitleTpl">
                <ng-template #organizationUTitleTpl>
                    <i nz-icon type="share-alt"></i>{{'OrganizationUnits' | localize}}
                </ng-template>
                <organization-unit-tree #organizationUnitTree></organization-unit-tree>
            </nz-tab>
        </nz-tabset>
    </fieldset>

    <div class="modal-footer">
        <button nz-button [nzType]="'default'" type="button" (click)="close($event)" [disabled]="saving">
            {{"Cancel" | localize}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!createOrEditModalForm.form.valid || saving"
            [nzLoading]="saving">
            <i nz-icon type="save" *ngIf="!saving"></i> {{"Save" | localize}}
        </button>
    </div>

</form>